<template>
  <div class="container">
    <h1>
      <el-image
        style="width: 40px; height: 40px; vertical-align: middle"
        :src="url"
      ></el-image>
      综测评分系统
    </h1>
    <el-form ref="form" :model="form" :rules="rules" v-if="radio===0||radio===1">
      <el-form-item
        label="二级学院"
        prop="SecondaryCollege"
        class="classFormItem"
      >
        <el-select
          v-model="form.SecondaryCollege"
          placeholder="请选择学院"
          filterable
          @change="selectValue"
        >
          <el-option
            v-for="item in SecondaryCollegeList"
            :key="item._id"
            :label="item.SecondaryCollege"
            :value="item.SecondaryCollege"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级" prop="className" class="classFormItem">
        <el-select v-model="form.className" filterable placeholder="请选择班级"
          ><el-option
            v-for="item in classList"
            :key="item.className"
            :label="item.className"
            :value="item.className"
          ></el-option
        ></el-select>
      </el-form-item>
      <el-form-item label="年级" prop="grade" class="classFormItem">
        <el-select v-model="form.grade" placeholder="请选择年级">
          <el-option
            v-for="item in gradeList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="studentName" class="classFormItem">
        <el-input v-model="form.studentName" style="width: 217px"></el-input>
      </el-form-item>
      <el-form-item label="学号" prop="student_Number" class="classFormItem">
        <el-input v-model="form.student_Number" style="width: 217px"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" class="classFormItem">
        <el-input
          type="password"
          v-model="form.password"
          show-password
        ></el-input>
      </el-form-item>

      <div class="Radio">
        <el-radio
          v-model="radio"
          v-for="item in radioList"
          :key="item.label"
          :label="item.label"
          @change="RadioValue"
          style="margin-right: 10px"
          >{{ item.value }}</el-radio
        >
      </div>

      <el-form-item class="button">
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button type="primary" @click="onRegister">注册</el-button>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="form" :rules="rules" v-if="radio===2">
      <el-form-item
        label="二级学院"
        prop="SecondaryCollege"
        class="classFormItem"
      >
        <el-select
          v-model="form.SecondaryCollege"
          placeholder="请选择学院"
          filterable
          @change="selectValue"
        >
          <el-option
            v-for="item in SecondaryCollegeList"
            :key="item._id"
            :label="item.SecondaryCollege"
            :value="item.SecondaryCollege"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账号" prop="student_Number" class="classFormItem">
        <el-input v-model="form.student_Number" style="width: 217px"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" class="classFormItem">
        <el-input
          type="password"
          v-model="form.password"
          show-password
        ></el-input>
      </el-form-item>
      <div class="Radio">
        <el-radio
          v-model="radio"
          v-for="item in radioList"
          :key="item.label"
          :label="item.label"
          @change="RadioValue"
          style="margin-right: 10px"
          >{{ item.value }}</el-radio
        >
      </div>
      <el-form-item class="button">
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button type="primary" @click="onRegister">注册</el-button>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="form" :rules="rules" v-if="radio===3">
      <el-form-item label="账号" prop="student_Number" class="classFormItem">
        <el-input v-model="form.student_Number" style="width: 217px"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" class="classFormItem">
        <el-input
          type="password"
          v-model="form.password"
          show-password
        ></el-input>
      </el-form-item>
      <div class="Radio">
        <el-radio
          v-model="radio"
          v-for="item in radioList"
          :key="item.label"
          :label="item.label"
          @change="RadioValue"
          style="margin-right: 10px"
          >{{ item.value }}</el-radio
        >
      </div>
      <el-form-item class="button">
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button type="primary" @click="onRegister">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      form: {
        student_Number: "",
        password: "",
        SecondaryCollege: "",
        className: "",
        studentName: "",
        grade: "",
      },
      gradeList: [
        { value: "大一", label: "dayi" },
        { value: "大二", label: "daer" },
        { value: "大三", label: "dasan" },
        { value: "大四", label: "dasi" },
      ],
      classList: [],
      SecondaryCollegeList: [
        { value: "数学与统计学院", label: "shuTong" },
        { value: "美术与设计学院", label: "meiShe" },
        { value: "商学院", label: "shang" },
        { value: "政史学院", label: "zhengShi" },
        { value: "教育科学学院", label: "jiaoKe" },
        { value: "外国语学院", label: "waiYu" },
        { value: "体育学院", label: "tiYu" },
        { value: "文学与传媒学院", label: "wenChuan" },
        { value: "音乐舞蹈学院", label: "yinWu" },
        { value: "物理科学与工程技术学院", label: "wuGong" },
        { value: "化学与材料学院", label: "huaCai" },
        { value: "生物与制药学院", label: "shengYao" },
        { value: "电子与通信工程学院", label: "dianXin" },
        { value: "计算机科学与工程学院", label: "jiGong" },
        { value: "国际教育学院", label: "guoJiao" },
        { value: "继续教育学院", label: "jiJiao" },
      ],
      rules: {
        student_Number: [{ required: true, message: "用户名不能为空" }],
        password: [{ required: true, message: "密码不能为空" }],
        SecondaryCollege: [{ required: true, message: "学院不能为空" }],
        className: [{ required: true, message: "班级不能为空" }],
        studentName: [{ required: true, message: "姓名不能为空" }],
        grade: [{ required: true, message: "年级不能为空" }],
      },
      radio: 0,
      radioList: [
        { value: "学生", label: 0 },
        { value: "班级管理员", label: 1 },
        { value: "学院管理员", label: 2 },
      ],
    };
  },
  created() {
    this.getClass();
  },
  methods: {
    RadioValue(value) {
      console.log("radio==", value);
    },
    selectValue(value) {
      this.classList = this.SecondaryCollegeList.filter((item) => {
        return item.SecondaryCollege === value;
      })[0].classList;
      console.log("e-=-=", this.classList);
    },
    submitForm() {
      // 调用子组件form的validate方法
      this.$refs.form.validate(async (valid) => {
        // valid： 表单校验是否通过
        console.log(valid);
        if (valid) {
          // this.$router.push("/home");
          console.log("form", this.form);
          const data = await this.$store.dispatch("user/login", {
            ...this.form,
            radio: this.radio,
          });
          console.log("radio", this.radio);
          if (data.code === 200 && this.radio === 0) {
            this.$router.push("/manage/home");
          } else if (
            data.code === 200 &&
            data.data.isStudentManage === 1 &&
            this.radio === 1
          ) {
            this.$router.push("/AdminManageHome");
          } else if (
            data.code === 200 &&
            data.data.isStudentManage === 2 &&
            this.radio === 2
          ) {
            this.$router.push("/AdminManageHome");
          } else {
            this.$message(data.msg + "," + data?.err?.reason);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    onRegister() {
      this.$request
        .post("/studentRegister/register", {
          ...this.form,
        })
        .then(({ data }) => {
          if (data.code === 200) {
            this.$message("注册成功，点击登录");
            this.getClass();
          }
          console.log(data, "data111111111111111111");
        });

      return;
    },
    getClass() {
      this.$request.get("/getClassList/getClass", {}).then(({ data }) => {
        this.SecondaryCollegeList = data.data;
        console.log("data0000000000000000000000000000000000000000", data.data);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding: 0px 20px;
  h1 {
    //   position: absolute;
    top: 0;
    left: 0;
    vertical-align: middle;
  }
  .el-form {
    width: 300px;
    // margin-top: 50px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 0px 1000px 0px blue;
    padding: 30px 50px 0 50px;
    margin: auto;
    .classFormItem {
      // float: right !import;
      display: flex;
      justify-content: end;
    }
    .Radio {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    .el-form-item__content {
      width: 217px;
    }
  }
  .button {
    text-align: center;
    button {
      margin-right: 30px;
      margin-left: 30px;
    }
  }
}
</style>